<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平导航栏</title>
    <style>
        body{
            margin: 0;
        }
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            /*带有细灰色边框的灰色水平导航栏*/
            border: 1px solid #e7e7e7;
            background-color: #f3f3f3;
            /*固定顶部状态栏 position: fixed; top 0; width 100%; 注意固定定位在移动设备上可能无法正常工作*/
            position: fixed;
            top: 0;
            width: 100%;
        }
        li{
            display: inline;
            float: left;
            /*将border-right 属性添加到li以创建链接分隔符*/
            border-right: 1px solid #bbb;
        }
        /*为所有列表项添加灰色右边框 最后一项last-child 除外*/
        li:last-child{
            border-right: none;
        }
        li a {
            display: block;
            color: #666;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            /*background-color: #dddddd;*/
        }
        /*鼠标悬停时改变链接颜色*/
        li a:hover{
            background-color: #111;
        }
        /*向当前链接添加一个active类,这样用户就知道在那个页面*/
        .active{
            background-color: #4CAF50;
        }
    </style>
</head>
<!--
水平导航栏
display: inline; -默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。
创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局：
float: left; - 使用 float 使块元素滑动为彼此相邻
display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
padding: 8px; - 使块元素更美观
background-color: #dddddd; - 为每个元素添加灰色背景色
如需全宽的背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素：

水平导航栏实例
创建具有深色背景色的基础水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色：

-->
<body>
<div class="shl">
    <ul class="ul">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="news">News</a></li>
        <li><a href="contact">Contact</a></li>
<!--        通过将列表项向右浮动来右对齐链接 float:right-->
        <li style="float: right"><a class="active" href="about">About</a></li>
    </ul>
</div>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
    <h1>固定的顶部导航栏</h1>
    <h2>请滚动页面以查看效果。</h2>
    <h2>页面滚动时导航栏将位于页面顶部。</h2>

    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
</div>
</body>
</html>